<template>
    <div class="file-wrap">
        <div class="card-wrap">
          <CardList :data-source="cardList" @click="handleCardClick"></CardList>
        </div>
        <div class="history-wrap">
          <ScrollList :data-source="historyData" :style="{height: scrollListHeight}" header="历史文件" @click="HandleHistoryItemClick"></ScrollList>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { h, ref, reactive } from 'vue';
    import CardList from '@/components/card-list/index.vue';
    import ScrollList from '@/components/scroll-list/index.vue';

    import { useRouter } from 'vue-router';

    const router = useRouter();

    defineOptions({
        name: 'file'
    });

    const cardList = ref([
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L1',
        description: '文件描述，这是程序类型文件文件描述，这是程序类型文件文件描述',
        expiration: 300,
      },
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L2',
        description: '文件描述，这是程序类型文件文件描述，这是程序类型文件文件描述',
        expiration: 300,
      },
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L3',
        description: '',
        expiration: 300,
      },
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L1',
        description: '',
        expiration: 300,
      },
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L2',
        description: '',
        expiration: 300,
      },
      {
        title: '程序文件',
        category: '体系文件',
        level: 'L3',
        description: '',
        expiration: 300,
      },
    ]);

    const historyData = ref([
      {
        id: 1,
        title: '体系文件',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 2,
        title: '临时文件',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 3,
        title: '外来文件',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 4,
        title: 'xxxx04',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 5,
        title: 'xxxx05',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 6,
        title: 'xxxx06',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 7,
        title: 'xxxx07',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 8,
        title: 'xxxx08',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 9,
        title: 'xxxx09',
        icon: '',
        description: '文件描述',
      },
      { 
        id: 10,
        title: 'xxxx10',
        icon: '',
        description: '文件描述',
      },
    ]);
    // 滚动条高度
    const scrollListHeight = ref('calc(100vh - 114px)');

    function handleCardClick(card, index) {
      console.log('handleCardClick=>card, index', card, index);
      router.push('/system/file/add');
    }

    const HandleHistoryItemClick = (data) =>{
      console.log('HandleHistoryItemClick=>data', data);
      router.push('/system/file/detail');
    }
</script>
<style lang="less" scoped>
    .file-wrap{
        display: grid;
        grid-template-columns: 4fr 1fr; /* 两列等宽 */
        gap: 10px; /* 间距 */
        .card-wrap {
          background-color: #fff;
        }
        .history-wrap{
          background-color: #fff;
        }
    }
</style>